<template>
  <div class="index">
    <nav-header></nav-header>
    <nav-menu></nav-menu>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <tags ref="tags"></tags>
      <section class="content">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </section>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import navMenu from '../layout/nav-menu'
import navHeader from '../layout/nav-header'
import tags from '../layout/tags'
import bus from 'lib@/utils/bus'

export default defineComponent({
  name: 'index',
  components: {
    navHeader,
    navMenu,
    tags
  },
  data() {
    return {
      tagsList: [],
      collapse: false
    }
  },
  created() {
    bus.$on('tags', (msg) => {
      let arr = []
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name)
      }
      this.tagsList = arr
    })

    bus.$on('collapse', (msg) => {
      this.collapse = msg
    })
  }
})
</script>

<style scoped></style>
